<mat-card>
  <mat-card-header class="m-b-16">
    <mat-card-title>Edit Profile</mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="reactiveForm" class="form-field-full">
      <div class="row">
        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Username</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="username" required>
            <mat-error *ngIf="reactiveForm.get('username')?.invalid">Please enter username
            </mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Email</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="email" required>
            <mat-error *ngIf="reactiveForm.get('email')?.invalid">
              {{getErrorMessage(reactiveForm)}}</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Gender</mat-label>
            <mat-select formControlName="gender" required>
              <mat-option>-- None --</mat-option>
              <mat-option value="1">male</mat-option>
              <mat-option value="2">female</mat-option>
            </mat-select>
            <mat-error *ngIf="reactiveForm.get('gender')?.invalid">Please select gender</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>City</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="city" required>
            <mat-error *ngIf="reactiveForm.get('city')?.invalid">Please enter city</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="address" required>
            <mat-error *ngIf="reactiveForm.get('address')?.invalid">Please enter address</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Company</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="company" required>
            <mat-error *ngIf="reactiveForm.get('company')?.invalid">Please enter company</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Mobile</mat-label>
            <input matInput placeholder="Simple placeholder" type="number" formControlName="mobile"
                   required>
            <mat-icon matSuffix>smartphone</mat-icon>
            <mat-error *ngIf="reactiveForm.get('mobile')?.invalid">Please enter mobile</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Tele</mat-label>
            <input matInput placeholder="Simple placeholder" type="number" formControlName="tele"
                   required>
            <mat-icon matSuffix>phone</mat-icon>
            <mat-error *ngIf="reactiveForm.get('tele')?.invalid">Please enter tele</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Website</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="website" required>
            <mat-error *ngIf="reactiveForm.get('website')?.invalid">Please enter website</mat-error>
          </mat-form-field>
        </div>

        <div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <input matInput [matDatepicker]="picker2" placeholder="Choose a date"
                   formControlName="date">
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
            <mat-error *ngIf="reactiveForm.get('date')?.invalid">Please enter website</mat-error>
          </mat-form-field>
        </div>
      </div>

      <div class="d-flex justify-content-end">
        <button mat-raised-button color="primary">Save</button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
